<template>
	<view class="fee">
		<view class="">
			<!-- 2.0.19支持autoBack，默认为false -->
			<u-navbar leftText="保修详情" :autoBack="true">
			</u-navbar>

			<view class="con-body">
				<view class="uni-flex-center">
					<view class="main-service uni-cell-90" style="padding-bottom: 10rpx; width: 96%; margin-left: 2%;">
						<view class="user-list">
							<view style="padding: 25rpx 40rpx">
								<u-grid :border="false" @click="click" :col="detail.status == 4 ? 1 : 5">
									<u-grid-item v-for="(item,index) in statusIcon" :key="index">
										<u-icon :customStyle="{paddingTop:20+'rpx'}" :name="item.icon" :size="40"
											:label="item.title" labelPos="bottom" :labelColor="item.color" space="10">
										</u-icon>
									</u-grid-item>
								</u-grid>
							</view>
						</view>
					</view>

					<view class="main-service uni-cell-90" style="padding-bottom: 10rpx; width: 96%; margin-left: 2%;">
						<view class="user-list">
							<view style="padding: 5rpx 20rpx">
								<view class="d_view">
									<text class="l_title">工单编号</text>
									<text class="d_content">{{detail.code}}</text>
								</view>

								<view class="d_view">
									<text class="l_title">提交时间</text>
									<text class="d_content">{{detail.create_time}}</text>
								</view>
							</view>
						</view>
					</view>

					<view class="main-service uni-cell-90" style="padding-bottom: 10rpx; width: 96%; margin-left: 2%;">
						<view class="user-list">
							<view class="title" style="height:80rpx;line-height: 80rpx;">
								<view style="float: left; clear: both;">
									<text>报事信息</text>
								</view>


							</view>
							<u-line></u-line>
							<view style="padding-left: 20rpx; padding-right: 20rpx; padding-bottom: 20rpx;">
								<view class="d_view" v-if="detail.house">
									<text class="l_title">报修楼号</text>
									<text class="d_content">{{detail.house}}</text>
								</view>

								<view class="d_view" v-if="detail.type">
									<text class="l_title">报修类型</text>
									<text class="d_content">{{detail.type}}</text>
								</view>
								<view class="d_view" v-if="detail.name">
									<text class="l_title">联系人</text>
									<text class="d_content">{{detail.name}}</text>
								</view>

								<view class="d_view" v-if="detail.tel">
									<text class="l_title">联系电话</text>
									<text class="d_content">{{detail.tel}}</text>
								</view>
								<view class="d_view" v-if="detail.name1">
									<text class="l_title">临时联系人</text>
									<text class="d_content">{{detail.name1}}</text>
								</view>

								<view class="d_view" v-if="detail.tel1">
									<text class="l_title">临时联系电话</text>
									<text class="d_content">{{detail.tel1}}</text>
								</view>
								<view class="d_view">
									<text class="l_title">预约时间</text>
									<text class="d_content">{{detail.time}}</text>
								</view>
							</view>
						</view>
					</view>

					<view class="main-service uni-cell-90" style="padding-bottom: 10rpx; width: 96%; margin-left: 2%;"
						v-if="detail.status >0">
						<view class="user-list">
							<view class="title" style="height:80rpx;line-height: 80rpx;">
								<view style="float: left; clear: both;">
									<text>工单详情</text>
								</view>


							</view>
							<u-line></u-line>
							<view style="padding-left: 20rpx; padding-right: 20rpx; padding-bottom: 20rpx;">
								<view class="d_view">
									<text class="l_title">派工时间</text>
									<text class="d_content">{{detail.examine.examine_time}}</text>
								</view>
								<view class="d_view">
									<text class="l_title">工单状态</text>
									<u-steps :current="current" activeColor="#2e8b57">
										<u-steps-item title="待报价"></u-steps-item>
										<u-steps-item title="待支付"></u-steps-item>
										<u-steps-item title="处理中"></u-steps-item>
										<u-steps-item title="已完成"></u-steps-item>
									</u-steps>
								</view>

								<view class="d_view" style="text-align: center;width: 100%;" v-if="detail.examine.status == 3">
									
									<view class="d_content" style="margin-left: 30%;width: 40%;">
										<u-qrcode ref="qrcode" canvas-id="qrcode" size="150"
											:value="detail.examine.identity_code"></u-qrcode>
									</view>
								</view>
								<view class="d_view">
									<text class="l_title">进度时间</text>
									<text class="d_content">{{detail.examine.examine_new_time}}</text>
								</view>

								<view class="d_view">
									<text class="l_title">分派人</text>
									<text class="d_content">{{detail.u_name}}</text>
								</view>

								<view class="d_view">
									<text class="l_title">联系电话</text>
									<u-icon name="phone" class="d_content" size="24" color="#2e8b57"
										:label="detail.u_tel" labelPos="left" @click="call(detail.u_tel)"></u-icon>
								</view>

								<view class="d_view" v-if="detail.examine.status >0">
									<text class="l_title">报价价格</text>
									<text class="d_content">{{detail.examine.offer_price}}</text>
								</view>
								<view class="d_view" v-if="detail.examine.status >0">
									<text class="l_title">报价说明</text>
									<text class="d_content">{{detail.examine.offer_memo}}</text>
								</view>
								<view style="clear: both;"></view>
								<view class="d_view" v-if="detail.examine.status == 3">
									<text class="l_title">确认识别码</text>
									<text class="d_content"
										style="color: #000; font-weight: 800;">{{detail.examine.identity_code}}</text>
								</view>
								<view class="d_view" v-if="detail.examine.status == 1">
									<text class="l_title">完成备注</text>
									<text class="d_content">{{detail.examine.complete_memo}}</text>
								</view>
							</view>
						</view>
					</view>
					<u-modal :show="showModal" title="支付提示" @confirm="confim">
						<view slot="default">
							<u-icon name="checkbox-mark" label="支付成功" labelPos="bottom" color="green" size="200rpx"></u-icon>
						</view>
					</u-modal>
					<u-modal :show="showDel" title="确定删除此条报修信息吗？" width="500rpx" @cancel="showDel = false"
					@confirm="confirmdel" showCancelButton></u-modal>
					<!-- <view v-if="detail.status == 0">
						<u-button :customStyle="btnStyle" @click="showDel = true">撤销</u-button>
					</view> -->

					<view v-if="detail.status == 1">
						<u-button :customStyle="btnStyle" @click="showDel = true">删除</u-button>
					</view>
					<u-toast ref="uToast"></u-toast>
					<view v-if="detail.status == 2 && detail.examine.status == 2">
						<u-button :customStyle="btnStyle" @click="pay">付款</u-button>
					</view>
					<view style="height: 40rpx;"></view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getRepairDetail,
		confirmRepair,
		delRepair
	} from "@/service/propertyService.js";
	export default {
		data() {
			return {
				id: 0,
				showDel: false,
				detail: {
					id: 0,
					code: '',
					create_time: '',
					floor: '',
					type: '',
					name: '',
					tel: '',
					name1: '',
					tel1: '',
					time: '',
					worker: '',
					worker_tel: '',
					status: ''
				},
				showModal:false,
				statusIcon: [

				],
				current: 0,
				description: '',
				btnStyle: {
					width: '96%',
					borderRadius: '40rpx',
					marginTop: '40rpx',
					marginBottom: '40rpx',
					backgroundImage: "url('https://resourse.cnlhjt.com/upload/20220825/d1aa35c1d129137d9b12c8f34e59c5bc.png')",
					backgroundSize: '100% 80rpx',
					color: '#FFFFFF'
				}
			}
		},
		onLoad(options) {
			this.id = options.id;
			getRepairDetail({
				id: this.id
			}).then(this.getRepairDetail);
		},
		methods: {
			getRepairDetail(e) {
				if (e.code == 200) {
					this.detail = e.result;
					this.statusManage(this.detail.status);
					if (this.detail.status > 0) {
						if (this.detail.examine.status == 0) {
							this.current = 0;
						} else if (this.detail.examine.status == 2) {
							this.current = 1;
						} else if (this.detail.examine.status == 3) {
							this.current = 2;
						} else if (this.detail.examine.status == 1) {
							this.current = 3;
						}
					}
				}
			},
			call(e){
				uni.makePhoneCall({
					phoneNumber: e //仅为示例
				});
			},
			pay() {
				confirmRepair({
					gid: this.id
				}).then(this.result);
			},
			result(e) {
				console.log(e);
				if (e.code == 200) {
					if (e.result == 'success') {
						uni.showToast({
							title: e.msg,
							icon: "success",
							complete() {
								uni.navigateBack({
									delta: 2
								})
							}
						});
					} else {
						uni.requestPayment({
							provider: 'wxpay',
							timeStamp: e.result.timeStamp,
							nonceStr: e.result.nonceStr,
							package: e.result.package,
							signType: 'MD5',
							paySign: e.result.paySign,
							success: this.success,
							fail: function(err) {
								console.log('fail:' + JSON.stringify(err));
								showToast(err.requestPayment);
							}
						});
					}
				} else {
					uni.showToast({
						title: e.msg,
						icon: "error"
					});
				}
			},

			success(e) {
				this.showModal = true;
				this.detail.examine.status = 3;
			},
			confim() {
				this.detail.examine.status = 3;
				this.showModal = false;
				// uni.navigateTo({
				// 	url: "/pages/index/index"
				// })
			},
			getRandomNumberByRange(start, end) {

				return Math.floor(Math.random() * (end - start) + start)

			},
			// 删除
			confirmdel(){
				delRepair({
					id:this.id
				}).then(res=>{
					if(res.code==200){
						this.showDel=false;
						this.$refs.uToast.show({
						
							type: 'success',
							title: '成功',
							message: res.msg,
							complete() {
								uni.navigateBack()
							}
						})
					}else{
						this.$refs.uToast.show({
						
							type: 'error',
							title: '失败',
							message: res.msg,
							complete() {
								
							}
						})
					}
				})
			},
			statusManage(status) {

				if (status == 0) {
					this.description = '确定撤回报修吗？'
					this.statusIcon = [{
							icon: 'https://s4.ax1x.com/2022/02/25/bAyQdU.png',
							title: '待处理',
							color: '#0B868E'
						},
						{
							icon: 'https://s4.ax1x.com/2022/02/25/bAyMZT.png',
							title: '',
							color: '#999999'
						},
						{
							icon: 'https://s4.ax1x.com/2022/02/25/bAyuLV.png',
							title: '处理中',
							color: '#999999'
						},
						{
							icon: 'https://s4.ax1x.com/2022/02/25/bAyMZT.png',
							title: '',
							color: '#999999'
						},
						{
							icon: 'https://s4.ax1x.com/2022/02/25/bAyNsx.png',
							title: '已处理',
							color: '#999999'
						}
					];
				} else if (status == 2) {
					this.statusIcon = [{
							icon: 'https://s4.ax1x.com/2022/02/25/bAyQdU.png',
							title: '待处理',
							color: '#0B868E'
						},
						{
							icon: 'https://s4.ax1x.com/2022/02/25/bAyns0.png',
							title: '',
							color: '#0B868E'
						},
						{
							icon: 'https://s4.ax1x.com/2022/02/25/bAymMq.png',
							title: '处理中',
							color: '#0B868E'
						},
						{
							icon: 'https://s4.ax1x.com/2022/02/25/bAyMZT.png',
							title: '',
							color: '#999999'
						},
						{
							icon: 'https://s4.ax1x.com/2022/02/25/bAyNsx.png',
							title: '已处理',
							color: '#999999'
						}
					];
				} else if (status == 1) {
					this.statusIcon = [{
							icon: 'https://s4.ax1x.com/2022/02/25/bAyQdU.png',
							title: '待处理',
							color: '#0B868E'
						},
						{
							icon: 'https://s4.ax1x.com/2022/02/25/bAyns0.png',
							title: '',
							color: '#0B868E'
						},
						{
							icon: 'https://s4.ax1x.com/2022/02/25/bAymMq.png',
							title: '处理中',
							color: '#0B868E'
						},
						{
							icon: 'https://s4.ax1x.com/2022/02/25/bAyns0.png',
							title: '',
							color: '#0B868E'
						},
						{
							icon: 'https://s4.ax1x.com/2022/02/25/bAyUL6.png',
							title: '已处理',
							color: '#0B868E'
						}
					];
				} else if (status == 4) {
					this.statusIcon = [{

						icon: 'https://s4.ax1x.com/2022/02/25/bAyQdU.png',
						title: '已关闭',
						color: '#0B868E'

					}]
					this.description = '确定删除报修吗？'
				}
			}
		}
	}
</script>

<style lang="scss">
	.l_title {
		font-size: 32rpx;
		color: #999999;
		float: left;
	}

	.d_content {
		color: #666666;
		font-size: 32rpx;
	}

	.d_view {
		margin-top: 30rpx;
		text-align: right;
	}
</style>
